<template>
  <v-dialog v-model="show" width="400" persistent>
    <v-card>
      <v-card-title> 注册 </v-card-title>

      <v-divider></v-divider>

      <v-card-text style="padding: 24px;">

        <v-text-field
            v-model="name"
            label="用户名"
            placeholder="请输入用户名"
            color="#0c422e"
            outlined
            hide-details
            dense
        ></v-text-field>

        <v-text-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
            color="#0c422e"
            outlined
            hide-details
            dense
            style="margin-top: 16px;"
        ></v-text-field>

        <v-card-actions>
          <v-radio-group v-model="client_tag" row hide-details style="margin-top: 16px;">
            <v-radio label="我是学生" :value="0" color="#0c422e" @click="reveal = false" ></v-radio>
            <v-radio label="我是老师" :value="1" color="#0c422e" @click="reveal = true"></v-radio>
          </v-radio-group>
        </v-card-actions>

          <!-- 初始隐藏的扩展卡片 -->
         <!-- 选择老师角色后，弹出权限口令 -->
        <v-expand-transition>
          <v-card
            v-show="reveal"
          >
            <v-text-field
              v-model="t_password"
              type="password"
              label="口令"
              placeholder="请输入权限口令"
              color="#0c422e"
              outlined
              hide-details
              dense
              style="margin-top: 16px;"
            ></v-text-field>
          </v-card>

        </v-expand-transition>
      </v-card-text>

      <v-divider></v-divider>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#0c422e" text @click="onCancel"> 取消 </v-btn>
        <v-btn color="#0c422e" text @click="onConfirm"> 确认 </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { Component, PropSync, Vue } from "vue-property-decorator";

@Component({
  name: "RegisterDialog"
})
export default class RegisterDialog extends Vue {
  @PropSync("showRegisterDialog", { type: Boolean, default: false })
  show!: boolean;
  name: string = "";
  password: string = "";
  client_tag: number = 0;
  t_password: string = "";
  reveal: boolean = false;

  onConfirm() {
    this.$store.dispatch("register", { name: this.name, password: this.password, client_tag: this.client_tag, t_password: this.t_password }).then(() => {
      this.onCancel();
    }).catch(() => {});
  }

  onCancel() {
    this.show = false;
    this.reveal = false;
    this.name = "";
    this.password = "";
    this.t_password = "";
    this.client_tag = 0;
  }

};
</script>

<style scoped>

</style>
